import React, { Component, Fragment } from 'react';
import { Checkbox, Input, message, Modal, Form, Select, Button, Radio } from 'antd';
import { ExclamationCircleOutlined, CloseOutlined } from '@ant-design/icons';
import Utils from './../../utils/utils';
import ContextMenu from './../ContextMenu';
import TreeFolder from './../TreeFolder';
import axios from './../../axios';
import store from './../../store';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import {getCsrfToken} from './../../utils/common';
import baseURL from './../../config/baseurl';
import { connect } from 'react-redux';
import OnlyOfficeOnlineEdit from './../OnlyOffice';
import iconList from './../../config/suffixIcon';
import ImgPreview from './../ImgPreview';
import VideoPlayer from './../VideoPreview';
import './index.less';
const Option = Select.Option;

let checkedArr = [];
let checkedArrx = [];
let count = 0;//1单击 2双击
class FileList extends Component {
	
	formRef = React.createRef();//创建分享链接模态框设置表单
	
	state = {
		nums: 0,//轮询接口的次数
		sucs: 0,//成功处理的次数
		fileList: [],
		index: "",//当前要操作的数据索引
		fileid: "",//当前要操作的数据id
		filename: "",//当前要操作的数据名称
		filerename: "",//重命名后的名称
		showRenameElem: "none",//重命名框
		isTreeFolderVisible: false,//移动或复制选择目标文件夹的模态框
		isShareVisible: false,//分享模态框
		shareLink: "",//分享链接
		shareLinkPwd: "",//分享链接的密码
		shareLinkSuccess: false,//分享链接状态
		isShareGroupVisible: false,//加入到共享群的模态框
		sharegroupCheckedId: "",//选中的即将将文件加入的群组
		isSharePeopleVisible: false,//分享给人模态框
		alluserOptions: [],//分享给人，网盘所有用户
		sharePeopleId: "",//分享给人的目标用户id
		item: null,
		onlyOfficeModalVisible: false,//onlyOffice模态框
		userObj: {},//onlyOffice
		fileObj: {},//onlyOffice
		extsSpreadsheetArr: [".xls", ".xlsx", ".xlsm",
		    ".xlt", ".xltx", ".xltm",
		    ".ods", ".fods", ".ots", ".csv"],
				
		extsPresentationArr: [".pps", ".ppsx", ".ppsm",
		    ".ppt", ".pptx", ".pptm",
		    ".pot", ".potx", ".potm",
		    ".odp", ".fodp", ".otp"],
				
		extsTextArr: [".doc", ".docx", ".docm",
		    ".dot", ".dotx", ".dotm",
		    ".odt", ".fodt", ".ott", ".rtf", ".txt",
		    ".html", ".htm", ".mht",
		    ".pdf", ".djvu", ".fb2", ".epub", ".xps"],
		isImgPreview: false,//图片预览
		imgPreviewUrl: "",//图片地址
		isVideoPreview: "none",//视频播放预览
		videoPreviewUrl: "",//视频地址
		isViewDetailModal: false,//查看文件详情
		detailData: {
			mimetype: ""
		},//文件详情的数据
	}
	
	componentWillUnmount(){
		this.unsubscribe();
	}
	
	componentDidMount(){
		this.unsubscribe = store.subscribe(this.handleStoreChange);
	}
	
	handleStoreChange = () => {
		const fileAction = store.getState();
		const isCheckedAll = store.getState().isCheckedAll;
		switch (fileAction){
			case "download": this.handleDownload(""); break;
			case "delete": this.handleDelete(); break;
			case "move": this.handleMove(); break;
			case "share": this.handleShare(); break;
			case "sharegroup": this.handleSharegroup(); break;
			case "reduction": this.handleReduction(); break;
			case "deleteCompletely": this.handleDeleteCompletely(); break;
			default: break;
		}
		this.handleCheckboxAll(isCheckedAll);
	}
	
	//点击文件名
	folderClick = (e,isdir,fileid,filename,item) => {
		//阻止点到底层，否则会选中当前行
		e.stopPropagation();  
		e.nativeEvent.stopImmediatePropagation();
		//如果是文件夹则进入文件夹
		if(isdir){
			this.props.folderClick(fileid,filename);
		}else{
			switch (item.filetype){
				case 1: ;//打开文档
					break;
				case 2: this.setState({isImgPreview: true, imgPreviewUrl: item.uri});//打开图片
					break;
				case 3: this.setState({isVideoPreview: "block", videoPreviewUrl: item.uri});//打开视频
				    break;
				default: message.info("此类型文件无法预览，推荐下载后打开");
					break;
			}
		}
	}
	
	//遍历数据
	renderFileList(data){
		checkedArr = [];
		return data.map((item,index)=>{
			if(item.checked){
				checkedArr.push(item.fileid);
			}
			return <li
						key={index}
						className="line-thumb act"
						onDoubleClick={()=>this.doubleClick(index, item.isdir, item.fileid, item.filename, item)}		
						onClick={()=>this.lineClick(index,item.isdir,item.fileid,item.filename,item)}
						onContextMenu={()=>this.contextMenu(index,item.fileid,item.filename,item)}
				>
				<div className={`act line-bg-thumb ${item.checked ? "line-bg-checked" : ""}`}>
					<Checkbox checked={item.checked} onClick={(e)=>this.onChange(e,item,index)} />
				</div>
				<div className="act line-main-thumb">
					{item.filetype === 2 && item.uri !== "" ?
						<img
							className="act file-isdir"
							src={item.uri} 
							onClick={(e)=>this.folderClick(e,item.isdir,item.fileid,item.filename, item)}
							alt=""
						/>
						:
						<span className="act filethumb-icon-wrap">
							<svg
								className="icon"
								aria-hidden="true"
								onClick={(e)=>this.folderClick(e,item.isdir,item.fileid,item.filename,item)}
							>
							    <use xlinkHref={iconList[item.mimetype]}></use>
							</svg>
						</span>
					}
					<span
						className="act file-isdir-thumb"
						onClick={(e)=>this.folderClick(e,item.isdir,item.fileid,item.filename,item)}
					>
						{item.filename}
					</span>
					{this.state.index === index ?
						<div className="rename-input-thumb-wrap" style={{display: this.state.showRenameElem}}>
							<Input 
								ref={(input)=>{this.renameInput = input}}
								value={this.state.filerename}
								onClick={(e)=>e.stopPropagation()}
								onChange={this.handleInputChange}
								onBlur={this.handleBlurSubmit}
								onKeyUp={(e)=>this.handleKeyupSubmit(e)}
								className="rename-input-thumb"
							/>
						</div> :null
					}
				</div>
			</li>
		})
	}
	
	lineClick = (index,isdir,fileid,filename,item) => {
		let list = this.props.filelist;
		//点击行选中行，如果当前已选中则取消选中
		if(list[index].checked){
			list[index].checked = false;
		}else{
			list[index].checked = true;
		}
		const fileList = this.renderFileList(list);
		this.setState({
			fileList,
			index,
			fileid,
			item
		})
		this.props.checkedClick(checkedArr);
	}
	
	doubleClick = (index, isdir, fileid, filename, item) => {
		//双击
		//如果是文件夹则进入文件夹
		if (isdir) {
			this.props.folderClick(fileid, filename);
		} else {
			switch (item.filetype) {
				case 1: ;//打开文档
					break;
				case 2: this.setState({ isImgPreview: true, imgPreviewUrl: item.uri });//打开图片
					break;
				case 3: this.setState({ isVideoPreview: "block", videoPreviewUrl: item.uri });//打开视频
					break;
				default: message.info("此类型文件无法预览，推荐下载后打开");
					break;
			}
		}
	}

	//点击全选按钮
	handleCheckboxAll = (isCheckedAll) => {
		let list = this.props.filelist.map((item, index)=>{
			item.checked = isCheckedAll;
			return item
		});
		const fileList = this.renderFileList(list);
		this.setState({
			fileList
		})
		this.props.checkedClick(checkedArr);
	}
	
	//点击单选checkbox框
	onChange = (e,v,i) => {
		//阻止点到底层
		e.stopPropagation();  
		e.nativeEvent.stopImmediatePropagation();
		let list = this.props.filelist;
		list[i].checked = e.target.checked;
		const fileList = this.renderFileList(list);
		this.setState({
			fileList,
			index:i,
			fileid: v.fileid
		})
		this.props.checkedClick(checkedArr);
	}
	
	
	//右击事件
	contextMenu = (index, fileid, filename, item) => {
		let list = this.props.filelist;
		list[index].checked = true;
		const fileList = this.renderFileList(list);
		this.setState({
			fileList,
			index, 
			fileid, 
			filename,
			item
		})
		this.props.checkedClick(checkedArr);
	}
	
	//右击某一项
	contextMenuClick = (type) => {
		switch (type){
			case "rename": this.handleRename(); break;//重命名
			case "download": this.handleDownload(); break;//下载
			case "move": this.handleMove(); break;//移动
			case "copy": this.handleCopy(); break;//复制
			case "sharepeople": this.handleSharePeople(); break;//共享给人
			case "share": this.handleShare(); break;//分享链接
			case "sharegroup": this.handleSharegroup(); break;//共享
			case "delete": this.handleDelete(); break;//删除
			case "reduction": this.handleReduction(); break;//回收站还原
			case "deleteCompletely": this.handleDeleteCompletely(); break;//回收站永久删除
			case "sharegroupdownload": this.handleDownload("sharegroup"); break;//共享群文件下载
			case "sharegroupsave": this.handleSharegroupsave(); break;//共享群文件保存到网盘
			case "sharegroupdelete": this.handleSharegroupdelete(); break;//共享群文件删除
			case "jump": this.handleJump(); break;//跳转到目录
			case "onlyofficeOnlineEdit": this.onlyofficeOnlineEdit(); break;//在线编辑
			case "viewdetail": this.viewDetail(); break;//查看文件详情
			default: break;
		}
	}
	
	/**
	 * 通过文件后缀类型获取onlyoffice的documentType属性类型，参数 fileType 必须携带 . 符合，如：.docx .xlsx
	 * @param {*} fileType 
	 */
	getDocumentTypeByFileType = (fileType) => {
	    if (this.state.extsTextArr.indexOf(fileType) > -1){
	        return "text";
	    }
	    if (this.state.extsSpreadsheetArr.indexOf(fileType) > -1){
	        return "spreadsheet";
	    }
	    if (this.state.extsPresentationArr.indexOf(fileType) > -1){
	        return "presentation";
	    }
	    return null;
	}
	
	/**
	 * 显示onlyoffice在线编辑窗体
	 */
	onlyofficeOnlineEdit = () => {
		
	    // TODO axios 调用获取文件相关信息封装 ，如下为模拟
	    let userId = "" + Math.floor(Math.random() * 100 + 1);
	    let userObj = {
	        userid: userId,
	        username: "lxj" + userId
	    }
		// let url = "/files/download/local";
		// let val = this.props.item.fileid;
	    let currDocFileObj = {
	        fileKey: "12NAFE111",
	        fileTitle: "新式bug.docx",
	        // fileUrl: baseURL + url + "?fileid="+val+"&CSRF="+getCsrfToken(),
			fileUrl: "http://192.168.226.208:8805/新式bug.docx",
	        fileType: "docx",
	        isAllowOnlineEdit: true
	    }
	    let searchDocFileType = '.'+currDocFileObj.fileType;
	    let docDocumentType= this.getDocumentTypeByFileType(searchDocFileType);
	    if (docDocumentType == null){
	        message.warning("此文件类型无法使用在线编辑");
	        return;
	    }
	    let docFileObj = {
	        fileKey: "12NAFE1",
	        fileTitle: "新式bug.docx",
	        fileUrl: "http://192.168.226.208:8805/新式bug.docx",
	        fileType: "docx",
	        isAllowOnlineEdit: true,
	        documentType: docDocumentType
	    }
	    this.setState({
			onlyOfficeModalVisible: true,
	        userObj: userObj,
	        fileObj: docFileObj
	    });
	};
	
	//关闭在线编辑
	closeOnlyOfficeModal = () => {
		this.setState({onlyOfficeModalVisible: false});
	}
	
	//跳转到目录
	handleJump = () => {
		this.props.jumpToFile(this.state.item);
		this.props.history.push("/main/whole");
	}
	
	//点击重命名
	handleRename = () => {
		this.setState({showRenameElem: "block",filerename:this.state.filename});
		setTimeout(()=>{
			this.renameInput.select();
		},500)
	}
	//重命名输入框变化
	handleInputChange = (e) => {
		this.setState({
			filerename: e.target.value
		})
	}	
	//回车重命名
	handleKeyupSubmit = (e) => {
		if(e.keyCode === 13){
			//这个会触发下面的失去焦点事件,即执行this.handleBlurSubmit
			this.setState({showRenameElem: "none"});
		}
	}
	//输入框失去焦点重命名
	handleBlurSubmit = () => {
		this.setState({showRenameElem: "none"});
		const { filename, filerename } = this.state;
		if(filerename === "" || filerename === " "){
			message.error("文件名不能为空");
		}else if(filename === filerename){
			message.error("重命名与原名称不能一致");
		}else if(filerename.indexOf("/")>=0){
			message.error("文件名不能包含'/'");
		}else{
			// this.renameSubmit();
		}
	}	
	//重命名提交
	renameSubmit = () => {
		let url = "/files/file/rename";
		const renameType = this.props.contextMenuType;
		if(renameType === "sharegrouplist"){
			url = "/share/group/rename"
		}
		axios.ajax({
			url: url, 
			method: "post",
			data: {
				fileid: this.state.fileid,
				destname: this.state.filerename
			},
		}).then(res=>{
			if(res.code === 0){
				message.success(res.msg);
				this.props.refreshList();
			}
		})
	}
	
	//分享给人
	handleSharePeople = () => {
		this.setState({isSharePeopleVisible: true});
		this.getAllUser();
	}
	
	//分享给人，先获取所有网盘用户
	getAllUser = () => {
		axios.get({
			url:"/files/group/getUsers"
		}).then(res => {
			if(res.code === 0){
				let alluserOptions = res.result;
				this.setState({ alluserOptions });
			}
		})
	}
	
	//分享给人选中用户
	sharePeopleChecked = (value) => {
		this.setState({sharePeopleId: value})
	}
	
	//分享给人提交数据
	sharePeopleSubmit = () => {
		const { sharePeopleId, fileid } = this.state;
		if(!sharePeopleId){
			message.info("请先选择用户");
		}else{
			this.setState({isSharePeopleVisible: false});
			axios.ajax({
				url: "/Share/People/localFileShareToUser", 
				method: "post",
				data: { file_id: fileid, to_user_id: sharePeopleId }
			}).then(res=>{
				if(res.code === 0){
					message.success("分享成功");
				}else{
					message.error("分享失败")
				}
			})
		}
	}
	
	//分享链接
	handleShare = () => {
		this.setState({isShareVisible: true, shareLinkSuccess: false});
		setTimeout(() => {
			this.formRef.current.resetFields();
		}, 500);
	}
	
	//创建分享链接
	//数据保存提交
	handleSubmit = values => {
		//一天的时间戳为60s*60m*24h=86400
		//几天后的时间戳---秒级
		// let time = parseInt(new Date().getTime() / 1000) + values.exp_time * 86400;
		// 
		// let data = null;
		// if(values.hasPwd){
		// 	data = {fileId: this.state.fileid, exp_time: time, hasPwd: values.hasPwd}
		// }else{
		// 	data = {fileId: this.state.fileid, exp_time: time}
		// }
		values.fileId = this.state.fileid;
		axios.ajax({
			url: "/share/shareLink/createLink", 
			method: "post",
			data: values
		}).then(res=>{
			if(res.code === 0){
				let url = res.result.url;
				let shareUrl = baseURL + "/#/shareLink/"+url;
				this.setState({
					shareLink: shareUrl,
					shareLinkPwd: res.result.pwd,
					shareLinkSuccess: true
				})
			}else{
				message.error("创建失败")
			}
		})
	}
	
	//复制链接及密码
	onCopy = () => {
		message.success("复制成功");
	}
	
	//加入到共享群
	handleSharegroup = () => {
		checkedArrx = checkedArr;//当前选中的文件
		const radioStyle = {
			display: 'block',
			height: '30px',
			lineHeight: '30px',
		};
		let sharegroupList;
		//获取群列表
		axios.get({
			url:"/files/group/list",
			params: {page: 1, pageSize: 1000}
		}).then(res => {
			if(res.code === 0){
				sharegroupList = res.result.list.map((item, index)=>{
					return <Radio key={index} value={item.id} style={radioStyle}>
						{item.name}
					</Radio>
				})
				this.setState({isShareGroupVisible: true, sharegroupList});
			}
		})
	}
	
	//选择共享群
	sharegroupChecked = e => {
		this.setState({sharegroupCheckedId: e.target.value});
	}
	
	shareGroupCheckedSubmit = () => {
		const groupid = this.state.sharegroupCheckedId;
		if(!groupid){
			message.info("请先选择一个群");
		}else{
			this.setState({isShareGroupVisible: false});
			let length = checkedArrx.length;//总次数
			this.nums = 0;//重置一下
			this.sucs = 0;
			for(let val of checkedArrx){
				axios.get({
					url: "/share/group/share", 
					method: "get",
					params: { fileid: val, groupid: groupid }
				}).then(res=>{
					this.nums++;
					if(res.code === 0){
						this.sucs++;
					}
					if(this.nums === length){//表示最后一次循环完成
						if(this.sucs === length){//成功次数等于总数
							message.success("加入共享群成功");
						}else if(this.sucs === 0){
							message.error("加入共享群失败");
						}else{
							let errs = length - this.sucs;
							message.info(this.sucs + "条成功，" + errs + "条加入群失败");
						}
						this.props.refreshList();
					}
				})
			}
		}
	}
	
	//移动文件夹
	handleMove = () => {
		checkedArrx = checkedArr;
		this.setState({isTreeFolderVisible: true, isTreeFolderTitle: "移动到", treetime: Math.random()});
	}
	
	//复制文件夹到...
	handleCopy = () => {
		this.setState({isTreeFolderVisible: true, isTreeFolderTitle: "复制到", treetime: Math.random()});
	}
	
	//保存到网盘
	handleSharegroupsave = () => {
		checkedArrx = checkedArr;
		this.setState({isTreeFolderVisible: true, isTreeFolderTitle: "保存到网盘", treetime: Math.random()});
	}
	
	//删除文件到垃圾桶
	handleDelete = () => {
		//checkedArrx作用先保留值，否则redux状态改变被置空了
		checkedArrx = checkedArr;
		Modal.confirm({
			title: `确认删除这些文件(夹)？`,
			icon: <ExclamationCircleOutlined />,
			content: "删除后可在回收站还原",
			okText: "确认删除",
			cancelText: "取消",
			onOk:()=>{
				let length = checkedArrx.length;//总次数
				this.nums = 0;//重置一下
				this.sucs = 0;
				for(let val of checkedArrx){
					axios.ajax({
						url: "/files/trashbin/deleteFiles", 
						method: "post",
						data: { fileId: val }
					}).then(res=>{
						this.nums++;
						if(res.code === 0){
							this.sucs++;
						}
						if(this.nums === length){//表示最后一次循环完成
							if(this.sucs === length){//成功次数等于总数
								message.success("删除成功");
							}else if(this.sucs === 0){
								message.error("删除失败");
							}else{
								let errs = length - this.sucs;
								message.info(this.sucs + "条成功，" + errs + "条删除失败");
							}
							this.props.refreshList();
						}
					})
				}
			}
		})
	}
	
	//共享群的文件删除
	handleSharegroupdelete = () => {
		//checkedArrx作用先保留值，否则redux状态改变被置空了
		checkedArrx = checkedArr;
		Modal.confirm({
			title: `确认删除这些文件(夹)？`,
			icon: <ExclamationCircleOutlined />,
			content: "想好后再操作喔",
			okText: "确认删除",
			cancelText: "取消",
			onOk:()=>{
				let length = checkedArrx.length;//总次数
				this.nums = 0;//重置一下
				this.sucs = 0;
				for(let val of checkedArrx){
					axios.get({
						url: "/share/group/del", 
						method: "get",
						params: { fileid: val }
					}).then(res=>{
						this.nums++;
						if(res.code === 0){
							this.sucs++;
						}
						if(this.nums === length){//表示最后一次循环完成
							if(this.sucs === length){//成功次数等于总数
								message.success("删除成功");
							}else if(this.sucs === 0){
								message.error("删除失败");
							}else{
								let errs = length - this.sucs;
								message.info(this.sucs + "条成功，" + errs + "条删除失败");
							}
							this.props.refreshList();
						}
					})
				}
			}
		})
	}
	
	dirChecked = (fileid) => {
		//fileid取到选中了哪一个文件夹
		this.setState({dirCheckedId: fileid});
	}
	
	//移动或复制提交，0729增加共享文件保存到网盘
	dirCheckedSubmit = () => {
		this.setState({isTreeFolderVisible: false});
		let url = "";
		const type = this.state.isTreeFolderTitle;
		const destid = this.state.dirCheckedId;//选中的文件夹
		if(type === "复制到"){
			url = "/files/file/copy";
		}else if(type === "移动到"){
			url = "/files/file/move";
		}else{
			url = "/Share/Group/copyShareFileToLocal";//共享群文件保存到网盘url
			let length = checkedArrx.length;//总次数
			this.nums = 0;//重置一下
			this.sucs = 0;
			for(let val of checkedArrx){
				axios.ajax({
					url: url, 
					method: "post",
					data: { file_id: val, path_id: destid }
				}).then(res=>{
					this.nums++;
					if(res.code === 0){
						this.sucs++;
					}
					if(this.nums === length){//表示最后一次循环完成
						if(this.sucs === length){//成功次数等于总数
							message.success("保存成功");
						}else if(this.sucs === 0){
							message.error("保存失败");
						}else{
							let errs = length - this.sucs;
							message.info(this.sucs + "条成功，" + errs + "条保存失败");
						}
						this.props.refreshList();
					}
				})
			}
			return;//阻止后面代码的执行
		}
		let length = checkedArrx.length;//总次数
		this.nums = 0;//重置一下
		this.sucs = 0;
		for(let val of checkedArrx){
			if(val !== destid){
				axios.get({
					url: url, 
					method: "get",
					params: {
						fileid: val,
						destid: destid
					}
				}).then(res=>{
					this.nums++;
					if(res.code === 0){
						this.sucs++;
					}
					if(this.nums === length){//表示最后一次循环完成
						if(this.sucs === length){//成功次数等于总数
							message.success("操作成功");
						}else if(this.sucs === 0){
							message.error("操作失败");
						}else{
							let errs = length - this.sucs;
							message.info(this.sucs + "条成功，" + errs + "条操作失败");
						}
						this.props.refreshList();
					}
				})
			}else{
				message.warning("一文件无法移动到自己及其子目录")
			}
		}
	}
	
	//回收站还原文件
	handleReduction = () => {
		let length = checkedArr.length;//总次数
		this.nums = 0;//重置一下
		this.sucs = 0;
		for(let val of checkedArr){
			axios.ajax({
				url: "/files/trashbin/recoverFiles", 
				method: "post",
				data: { fileId: val }
			}).then(res=>{
				this.nums++;
				if(res.code === 0){
					this.sucs++;
				}
				if(this.nums === length){//表示最后一次循环完成
					if(this.sucs === length){//成功次数等于总数
						message.success("还原成功");
					}else if(this.sucs === 0){
						message.error("还原失败");
					}else{
						let errs = length - this.sucs;
						message.info(this.sucs + "条成功，" + errs + "条还原失败");
					}
					this.props.refreshList();
				}
			})
		}
	}
	
	//回收站彻底删除文件
	handleDeleteCompletely = () => {
		Modal.confirm({
			title: `确认删除这些文件(夹)？`,
			icon: <ExclamationCircleOutlined />,
			content: "文件将被彻底删除，无法恢复",
			okText: "确认删除",
			cancelText: "取消",
			onOk:()=>{
				let length = checkedArr.length;//总次数
				this.nums = 0;//重置一下
				this.sucs = 0;
				for(let val of checkedArrx){
					axios.ajax({
						url: "/files/trashbin/deleteCompelete", 
						method: "post",
						data: { fileId: val }
					}).then(res=>{
						this.nums++;
						if(res.code === 0){
							this.sucs++;
						}
						if(this.nums === length){//表示最后一次循环完成
							if(this.sucs === length){//成功次数等于总数
								message.success("删除成功");
							}else if(this.sucs === 0){
								message.error("删除失败");
							}else{
								let errs = length - this.sucs;
								message.info(this.sucs + "条成功，" + errs + "条删除失败");
							}
							this.props.refreshList();
						}
					})
				}
			}
		})
	}
	
	//下载
	handleDownload = (type) => {
		let url = "";
		if(type === "sharegroup"){
			url = "/files/download/shareGroup";
		}else{
			url = "/files/download/local";
		}
		for(let val of checkedArr){
			window.open( baseURL + url + "?fileid="+val+"&CSRF="+getCsrfToken());
		}
	}
	
	//关闭图片预览
	closePreview = () => {
		this.setState({isImgPreview:false});
	}
	
	//关闭视频预览
	closeVideoPreview = () => {
		this.setState({isVideoPreview: "none"});
	}
	
	//查看文件详情
	viewDetail = () => {
		axios.get({
			url: "/files/file/detail",
			params: {fileid: this.state.fileid}
		}).then(res=>{
			if(res.code===0){
				if(res.result){
					this.setState({
						isViewDetailModal: true,
						detailData: res.result
					})
				}
			}
		})
	}
		
	render(){
		const { filelist, contextMenuType } = this.props;
		const { isTreeFolderVisible, isTreeFolderTitle, isShareVisible, isShareGroupVisible,
			isSharePeopleVisible, alluserOptions, onlyOfficeModalVisible,isImgPreview
			,isVideoPreview, isViewDetailModal,detailData, treetime, imgPreviewUrl,videoPreviewUrl
			,item} = this.state;
		const layout = {
		    labelCol: { span: 4 },
		    wrapperCol: { span: 10 },
		};
		const tailLayout = {
		    wrapperCol: { offset: 4, span: 20 },
		};
		return (
			<Fragment>
				<ul className="thumb-wrap">
					{ this.renderFileList(filelist) }
				</ul>
				<ContextMenu isonlyoffice={item} contextMenuType={contextMenuType} contextMenu={this.contextMenuClick} />
				<ImgPreview
				    visible={isImgPreview}  // 是否可见
				    onClose={this.closePreview} // 关闭事件
				    src={imgPreviewUrl} // 图片url
				    isAlwaysCenterZoom={true} // 是否总是中心缩放，默认false，若为true，每次缩放图片都先将图片重置回屏幕中间
				    isAlwaysShowRatioTips={false} // 是否总提示缩放倍数信息，默认false，只在点击按钮时提示，若为true，每次缩放图片都会提示
				/>
				<div className="video-player-wrap" style={{display: isVideoPreview}}>
					<CloseOutlined onClick={this.closeVideoPreview} className="close-icon" />
					<VideoPlayer visible={isVideoPreview} src={videoPreviewUrl} />
				</div>
				<Modal
					visible={isTreeFolderVisible}
					title={isTreeFolderTitle}
					okText="确认"
					cancelText="取消"
					onOk={this.dirCheckedSubmit}
					onCancel={()=>this.setState({isTreeFolderVisible: false})}
				>
					<TreeFolder time={treetime} dirChecked={this.dirChecked} />
				</Modal>
				<Modal
					visible={isShareGroupVisible}
					title="加入到共享群"
					okText="确认"
					cancelText="取消"
					onOk={this.shareGroupCheckedSubmit}
					onCancel={()=>this.setState({isShareGroupVisible: false})}
				>
					<Radio.Group onChange={this.sharegroupChecked}>
						{this.state.sharegroupList}
					</Radio.Group>
				</Modal>
				<Modal
					visible={isShareVisible}
					title="分享"
					footer={null}
					onCancel={()=>this.setState({isShareVisible: false})}
				>
					{this.state.shareLinkSuccess?
						<>
							{this.state.shareLinkPwd?
								<div>
									<p>链接创建成功</p>
									<Input value={this.state.shareLink} style={{marginBottom: "15px"}} />
									提取码&nbsp;<Input value={this.state.shareLinkPwd} style={{width: "100px"}} />
									&nbsp;&nbsp;&nbsp;&nbsp;
									<CopyToClipboard text={`${this.state.shareLink}密码:${this.state.shareLinkPwd}`} onCopy={this.onCopy}>
										<Button type="primary">复制链接及密码</Button>
									</CopyToClipboard>
								</div>
								:
								<div>
									<p>链接创建成功</p>
									<Input value={this.state.shareLink} style={{marginBottom: "15px"}} />
									<CopyToClipboard text={`${this.state.shareLink}`} onCopy={this.onCopy}>
										<Button type="primary">复制链接</Button>
									</CopyToClipboard>
								</div>
							}
						</>
						:
						<Form
							{...layout}
							ref={this.formRef}
							onFinish={this.handleSubmit}
						>
							<Form.Item
								label="分享形式"
								name="has_pwd"
								rules={[
									{required: true, message: "请选择"},
								]}
							>
								<Radio.Group>
									<Radio value={1}>有密码</Radio>
									<Radio value={0}>无密码</Radio>
								</Radio.Group>
							</Form.Item>
							<Form.Item
								label="有效期"
								name="exp_time"
								rules={[
									{required: true, message: "请选择"},
								]}
							>
							    <Radio.Group>
							    	<Radio value={1}>3天</Radio>
							    	<Radio value={2}>7天</Radio>
							    </Radio.Group>
							</Form.Item>
							<Form.Item  {...tailLayout}>
								<Button type="primary" htmlType="submit">
								    创建链接
								</Button>
								<Button htmlType="button" onClick={()=>this.setState({isShareVisible: false})}>
									取消
								</Button>
							</Form.Item>
						</Form>
					}
				</Modal>
				<Modal
					visible={isSharePeopleVisible}
					title="分享给人"
					okText="确认"
					cancelText="取消"
					onOk={this.sharePeopleSubmit}
					onCancel={()=>this.setState({isSharePeopleVisible: false})}
				>
					<Select
						showSearch
						optionFilterProp="children"
						onChange={this.sharePeopleChecked}
						style={{width: "100%"}}
						placeholder="请输入用户名"
					>
						{alluserOptions.map((item,index)=><Option key={index} value={item.id}>{item.user_name}</Option>)}
					</Select>
				</Modal>
				{onlyOfficeModalVisible?
					<div className="only-office-wrap">
						<div className="only-office-header">
							<h2>OnlyOffice在线编辑</h2>
							<CloseOutlined onClick={this.closeOnlyOfficeModal} className="only-office-close-icon" />
						</div>
						<div className="only-office-content">
							<OnlyOfficeOnlineEdit userObj={this.state.userObj} fileObj={this.state.fileObj}></OnlyOfficeOnlineEdit>
						</div>
					</div>:null
				}
				<Modal
					visible={isViewDetailModal}
					title="文件详情"
					footer={null}
					onCancel={()=>this.setState({isViewDetailModal: false})}
				>
					<p className="view-detail-line">
						<span className="view-detail-table">文件:</span>
						<span className="view-detail-txt">
							<svg
								style={{fontSize: "20px"}}
								className="icon"
								aria-hidden="true"
							>
								<use xlinkHref={iconList[detailData.mimetype]}></use>
							</svg>
							{detailData.filename}
						</span>
					</p>
					<p className="view-detail-line">
						<span className="view-detail-table">目录:</span>
						<span className="view-detail-txt">全部{detailData.path}</span>
					</p>
					<p className="view-detail-line">
						<span className="view-detail-table">大小:</span>
						<span className="view-detail-txt">{detailData.is_dir?"-":Utils.mertic(detailData.size)}</span>
					</p>
					<p className="view-detail-line">
						<span className="view-detail-table">创建者:</span>
						<span className="view-detail-txt">{detailData.creator}</span>
					</p>
					<p className="view-detail-line">
						<span className="view-detail-table">上次修改时间:</span>
						<span className="view-detail-txt">{Utils.formateDate(detailData.mtime)}</span>
					</p>
				</Modal>
			</Fragment>
		)
	}
}

const mapDispatch = (dispatch) => {
	return {
		jumpToFile(item){
			dispatch({
				type: "JUMP_FILE",
				item
			})
		}
	}
}
 
export default connect(null, mapDispatch)(FileList);